<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script src="jsonengine.js" type="text/javascript"></script>
<script type="text/javascript">
//post a message
var post = function(){
	// disable the buttons
	disableButton(true);
	// post a message
	$('#bform')._POST(function(){
		query();
	});
	// clear the text field
	$("#msgTxt").val("");
}
//get all posts and list them
var query = function(){
	// disable the buttons
	disableButton(true);
	// build query params
	if ($('#searchTxt').val()) params = {cond : "messageBody_.eq." + $('#searchTxt').val()};
	else params = { sort: "_createdAt.desc", limit: 100};
	var option = {
		"url":"/_je/myDoc",
		"data":params
	};
	// query for the messages
	$('#messages')._GET(option, success);
	// able the buttons
	disableButton(false);
}
var success = function(result){
	this.empty();
	for (i = 0; i < result.length; i++) {
		var msg = $("<div/>").text("(" + getUserName(result[i]) + ") " + result[i].messageBody_);
		this.append(msg);
	}
}
//extract an user name from the creator's email address
var getUserName = function(doc) {
	return doc._createdBy == null ? "nobody" : doc._createdBy.split("@")[0]; 
}
//disable sendBtn while waiting for reply from server
var disableButton = function(isDisabled) {
	if (isDisabled) {
		$("#sendBtn").attr("disabled", true);
		$("#searchBtn").attr("disabled", true);
	} else {
		$("#sendBtn").removeAttr("disabled");
		$("#searchBtn").removeAttr("disabled");
	}
}

$(function() {
	query();
});
</script>
</head>
<body>
<h1>BBS sample by jsonengine</h1>
<form id="aform" action="/_je/myDoc">
<input id="msgTxt" type="text" value=""  size="50">
<input id="sendBtn" type="button" value="Post" onclick="post();"><br>
</form>
<form id="aform" action="/_je/myDoc">
<input id="searchTxt" type="text" value="" size="50">
<input id="searchBtn" type="button" value="Search" oncolick="query();"><br>
</form>
<span id="messages"></span><br>
<br>
<hr>
<center>
Please see the HTML source of this page to learn how to write jQuery client for jsonengine.<br>
Powered by <a href="http://code.google.com/p/jsonengine/">jsonengine</a><br>
</center>
</body>
</body>
</html>